<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>微信消息管理</title>
 <%@ include file="/page/include.jsp" %>
 
 <style type="text/css">
 *,ul,li,dl,dt,dd{margin:0;outline:0;padding:0;}
 .tw_box{width:210px;margin-left:10px;margin-right:10px;}
 .tw_box img{vertical-align:middle;border:none}
 .tw_box  a{color:#4d4d4d;text-decoration:none;}
 .tw_box a:hover{color:#d60008}
 .tw_box li{list-style:none}
.tw_box .hd{height:48px;line-height:48px;}
.tw_box .hd h3{font-size:15px;font-weight:400}
.current {border:2px solid #42b548;}
.tw_box1{height:124px;border:1px solid #eee;}
.tw_box1 .other-info{display:none}
.tw_box1:hover .other-info{display:block}
.tw_box1_con{padding:9px;position:relative}
.tw_box1_con .pic{position:relative;width:187px;height:106px;}
.tw_box1_con .pic img{width:187px;height:106px;}
.tw_box1_con .pic strong{position:absolute;left:0;bottom:0;width:100%;padding:5px 0;background:rgba(0,0,0,0.5);color:#fff;line-height:18px;font-weight:400;font-size:14px;}
.tw_box1_con .pic strong b{display:block;padding:0 15px;font-weight:400}
.tw_box2 ul li{border:1px solid #e8e7eb;margin-top:-1px}
.tw_box21{height:98px;position:relative;}
.tw_box21 .pic{position:absolute;right:0;top:0;padding:20px;}
.tw_box21 .pic img{width:58px;height:58px;}
.tw_box21 .item-info{margin-right:100px;margin-left:10px;padding-top:20px}
.tw_box21 .item-info p{font-size:12px;line-height:16px;word-break:break-all;text-align:justify;height:64px;overflow:hidden}
.other-info{position:absolute;bottom:0;left:0;width:100%;height:40px;background:rgba(0,0,0,0.45);z-index:99;display:none}
.tw_box21:hover .other-info{display:block}
.other-info .px_part{float:left;margin-left:10px;margin-top:6px}
.other-info .del_part{float:right;margin-right:10px;margin-top:6px}
.other-info .px_part a{display:inline-block;width:28px;height:28px;}
.other-info .px_part a:hover{opacity:0.8}
.other-info .px_part a.a1{background:url(../statics/images/up1.png) no-repeat center center;}
.other-info .px_part a.a2{background:url(../statics/images/down1.png) no-repeat center center;}
.other-info .del_part a{display:inline-block;width:18px;height:28px;background:url(../statics/images/del1.png) no-repeat center center;}
.other-info .del_part a:hover{opacity:0.8}
.upload_part{position:relative;height:90px;border:1px dashed #dadbdd;margin-top:-1px}
.upload_part .inputbtn1{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../statics/images/jia.png) no-repeat center center;border:none;}
.upload_part .inputbtn1:hover{opacity:0.8}
.upload_part .inputfile{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;background:none;z-index:99;cursor:pointer}
 
 </style>
 
</head>
<body class="nav-md" style="background-color: #f7f7f7">
	<div class="container body">
		<div class="main_container">
			<div class="framebody" style="min-height: 100%;" role="main">
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="x_panel">
							<div class="x_content">
								<form class="form-horizontal form-label-left" id="wechatMsgConfigForm"  method="post" action="${pageContext.request.contextPath}/wechatMsgConfig/saveOrUpdateWechatMsgConfig">
									<input type="hidden"  id="id" name="id" value="${wechatMsgConfig.id }" >
									
									<div class="item form-group">
										<div class="col-md-2 col-sm-2" id="leftContainer" style="display:none;">
											<div class="row" style="margin-left: 30px;">
												<div class="tw_box">
													<div class="hd">
														<h3>图文列表</h3>
													</div>
													<div class="bd">
														<div class="tw_box1 current" style="border:2px solid #42b548;">
															<div class="tw_box1_con">
																<div class="pic">
																	<c:if test="${empty wechatMsgConfig.articleList }">
																	<img class="tw_image" src="${rootPath }/statics/images/article_default.jpg" /> <strong><b><p class="twTitle">标题</p></b></strong>
																	</c:if>
																	<c:if test="${not empty wechatMsgConfig.articleList }">
																	<img class="tw_image" src="${imgRootURL }/${wechatMsgConfig.articleList[0].thumbImageUrl}" /> <strong><b><p class="twTitle">${wechatMsgConfig.articleList[0].title}</p></b></strong>
																	</c:if>
																</div>
																<div class="other-info">
																	<div class="px_part">
																		<a href="javascript:;" class="a2" onclick="sortArticle(this, 'down')"></a>
																	</div>
																	<div class="del_part"></div>
																</div>
															</div>
															<c:if test="${empty wechatMsgConfig.articleList }">
															<!-- ID -->
															<input type="hidden" class="_id"/>
															<!-- 文章标题 -->
															<input type="hidden" class="_msgTitle"/>
															<!-- 封面 -->
															<input type="hidden" class="_imageUrl" />
															<!-- 摘要 -->
															<input type="hidden" class="_digest" />
															<!-- 图文内容 -->
															<input type="hidden" class="_content" />
															<!-- 链接类型 -->
															<input type="hidden" class="_linkType" value="1"/>
															<!-- 链接地址 -->
															<input type="hidden" class="_linkUrl" />
															</c:if>
															<c:if test="${not empty wechatMsgConfig.articleList }">
															<!-- ID -->
															<input type="hidden" class="_id" value="${wechatMsgConfig.articleList[0].id}" />
															<!-- 文章标题 -->
															<input type="hidden" class="_msgTitle" value="${wechatMsgConfig.articleList[0].title}" />
															<!-- 封面 -->
															<input type="hidden" class="_imageUrl" value="${wechatMsgConfig.articleList[0].thumbImageUrl}" />
															<!-- 摘要 -->
															<input type="hidden" class="_digest" value="${wechatMsgConfig.articleList[0].digest}" />
															<!-- 图文内容 -->
															<input type="hidden" class="_content" value= '${wechatMsgConfig.articleList[0].content}' />
															<!-- 链接类型 -->
															<input type="hidden" class="_linkType" value= '${wechatMsgConfig.articleList[0].linkType}' />
															<!-- 链接地址 -->
															<input type="hidden" class="_linkUrl" value= '${wechatMsgConfig.articleList[0].linkUrl}' />
															</c:if>
														</div>
														<div class="tw_box2">
															<ul>
																<c:forEach var="article" items="${wechatMsgConfig.articleList }" varStatus="status">
																<c:if test="${status.index ne 0 }">
																<li>
																	<div class="tw_box21">
																		<div class="item-info">
																			<p class="twTitle">${article.title }</p>
																		</div>
																		<div class="pic">
																			<img class="tw_image" src="${imgRootURL }/${article.thumbImageUrl}" />
																		</div>
																		<div class="other-info">
																			<div class="px_part">
																				<a href="javascript:;" class="a1" onclick="sortArticle(this, 'up')"></a>
																				<a href="javascript:;" class="a2" onclick="sortArticle(this, 'down')"></a>
																			</div>
																			<div class="del_part">
																				<a href="#" onclick="removeTwBox(this)"></a>
																			</div>
																		</div>
																		<!-- ID -->
																		<input type="hidden" class="_id" value="${article.id}" />
																		<!-- 文章标题 -->
																		<input type="hidden" class="_msgTitle" value="${article.title}" />
																		<!-- 封面 -->
																		<input type="hidden" class="_imageUrl" value="${article.thumbImageUrl}" />
																		<!-- 摘要 -->
																		<input type="hidden" class="_digest" value="${article.digest}" />
																		<!-- 图文内容 -->
																		<input type="hidden" class="_content" value='${article.content}' />
																		<!-- 链接类型 -->
																		<input type="hidden" class="_linkType" value='${article.linkType}' />
																		<!-- 链接地址 -->
																		<input type="hidden" class="_linkUrl" value='${article.linkUrl}' />
																	</div>
																	</li>
																	</c:if>
																</c:forEach>
															</ul>
														</div>
														<div class="tw_box3">
															<div class="upload_part">
																<input id="btbAddArticle" type="button" class="inputfile" />
																<input type="button" class="inputbtn1" value="&nbsp;" />
															</div>
														</div>
													</div>
												</div>
											</div>

										</div>
										<div class="col-md-10 col-sm-10" id="rightContainer">
											<div class="item form-group">
												<label class="control-label col-md-2 col-sm-2 col-xs-12" for="msgType"><span class="required"><font color="red">*</font></span>消息类型:
												</label>
												<div class="col-md-3 col-sm-3 col-xs-12">
													<select class="selectpicker form-control" id="msgType" name="msgType" data-value="${wechatMsgConfig.msgType }">
													</select>  
												</div>
											</div>
											<!-- 消息标题 -->
											<div class="item form-group">
												<label class="control-label col-md-2 col-sm-2 col-xs-12" for="msgTitle"><span class="required"><font color="red">*</font></span>消息标题: 
												</label>
												<div class="col-md-8 col-sm-8 col-xs-12">
													<input id="msgTitle" name="msgTitle" value="${wechatMsgConfig.msgTitle }" class="form-control col-md-3 col-xs-12"  type="text">
												</div>
											</div>
											
											<!-- 文本消息 -->
											<div id="textMsgContent" style="display:none;">
												<div class="item form-group">
													<label class="control-label col-md-2 col-sm-2 col-xs-12" for="textMessage">文本消息: 
													</label>
													<div class="col-md-8 col-sm-8 col-xs-12">
														<textarea id="textMessage" name="textMessage" style="height:100px;" class="form-control col-md-3 col-xs-12">${wechatMsgConfig.textMessage }</textarea>
													</div>
												</div>
											</div>
											
											<!-- 图片消息 -->
											<div id="imageMsgContent" style="display:none;">
												<div class="item form-group">
													<label class="control-label col-md-2 col-sm-2 col-xs-12" for="imageUrl"> <span class="required"><font color="red">*</font></span>封面: 
													</label>
													<div class="col-md-10 col-sm-10 col-xs-12">
														<div class="uploadpic_part">
															<ul class="image_container">
																<c:if test="${not empty wechatMsgConfig.imageUrl}">
																	<li>
																		<div class="pic1">
																			<a rel="image" href="<%=PublicConfig.IMG_ROOT_URL%>${wechatMsgConfig.imageUrl }">
																				<img id="thumbImage" src="<%=PublicConfig.IMG_ROOT_URL%>${wechatMsgConfig.imageUrl }?x-oss-process=image/resize,h_60/format,png" />
																			</a>
																			<a href="javascript:void(0)" onclick="clearImage(this,'image')" class="icon_close"></a> 
																		</div>
																	</li>
																</c:if>
																<c:if test="${empty wechatMsgConfig.imageUrl}">
																	<li>
																		<div class="pic1">
																			<img src="${rootPath }/statics/images/upload_pic1.png" />
																			<input id="upload_image" name="upload_image" type="file" onchange="ajaxFileUpload(this,'image')" />
																		</div>
																	</li>
																</c:if>
															</ul>
															<input type="hidden" id="imageUrl" name="imageUrl" value="${wechatMsgConfig.imageUrl}" />
														</div>
														<span class="pictips">封面图片建议尺寸：900像素 * 500像素</span>
													</div>
												</div>
											</div>
											
											<!-- 图文消息 -->
											<div id="imageTextMsgContent" style="display:none;">
												<div class="item form-group">
													<label class="control-label col-md-2 col-sm-2 col-xs-12" for="digest">摘要: 
													</label>
													<div class="col-md-8 col-sm-8 col-xs-12">
														<textarea id="digest" name="digest" style="height:60px;" class="form-control col-md-3 col-xs-12" placeholder="选填,如果不填写会默认抓取正文前54个子"></textarea>
													</div>
												</div>
												
												<!-- 图文消息点击链接方式 -->
												<div class="item form-group" >
													<label class="control-label col-md-2 col-sm-2 col-xs-12" >图文消息点击链接方式: 
													</label>
													<div class="col-md-8 col-sm-8 col-xs-12">
														<label class="control-label" for="linkType"><input type="radio" name="linkType" value="1" checked class="form-control" /> 内部连接(自行编辑图文界面内容)</label>
														&nbsp;&nbsp;
														<label class="control-label" for="linkType"><input type="radio" name="linkType" value="2" class="form-control" /> 外部连接(引用外部链接)&nbsp;<i class="fa fa-info-circle fa-fw"></i><b style="color:red;">注意:群发消息文章不支持外部链接!</b></label>
													</div>
												</div>
												
												<div class="item form-group" id="linkUrlContainer" style="display:none;">
													<label class="control-label col-md-2 col-sm-2 col-xs-12" for="linkUrl"><span class="required"><font color="red">*</font></span>链接地址: 
													</label>
													<div class="col-md-8 col-sm-8 col-xs-12">
														<textarea id="linkUrl" name="linkUrl" style="height:40px;" class="form-control col-md-3 col-xs-12"></textarea>
													</div>
												</div>
												
												<!-- 图文消息点击链接方式 -->
												<div class="item form-group" id="contentContainer">
													<label class="control-label col-md-2 col-sm-2 col-xs-12" for="digest">详细内容: 
													</label>
													<div class="col-md-6 col-sm-6">
														<script type="text/plain" id="tmpContent" style="width: 100%; height: 500px;"></script>
													</div>
												</div>
												
											</div>
										</div>
									</div>
									
									
								</form>
								<div class="ln_solid"></div>
								<div class="form-btn-content">
									<a id="btn_save" class="btn btn-primary">确定</a>
									<a id="btn_back"class="btn btn-default">返回</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<input type="hidden" id="opFlag" value=${opFlag } />
</body>
<script type="text/javascript" charset="utf-8" src="${rootPath}/statics/plugins/upload/ajaxfileupload.js"></script>
<script type="text/javascript" charset="utf-8" src="${rootPath }/statics/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${rootPath }/statics/plugins/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${rootPath }/statics/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="${rootPath}/js/sysconfig/wechatMsgConfig_form.js?v=20180316_v2"></script>
</html>